<template>
  <view class="wrap">
    <SuTable v-model="data" v-bind="bindVal" flex></SuTable>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue';
const bindVal = computed(() => {
  return {
    option: {
      align: 'center',
      column: [
        {
          label: '姓名',
          prop: 'name',
          sorter: 'default'
        },
        {
          label: '性别',
          prop: 'sex'
        },
        {
          label: '学历',
          prop: 'record'
        },
        {
          label: '年龄',
          prop: 'age',
          sorter: (row1, row2) => {
            return row1.age - row2.age;
          }
        }
      ]
    }
  };
});
const data = ref(
  Array.from({ length: 100 }, (v, i) => {
    return {
      name: 'Tom',
      sex: '男',
      record: '小学',
      age: i
    };
  })
);
</script>

<style lang="scss" scoped>
.wrap {
  @include wh(100%, 100%);
  // overflow-y: auto;
}
</style>
